Skip to content

refactor: move LogsSidebar to shared LogsFilterSidebar component and add dashboard date picker#2744

Merged
akshaydeo merged 1 commit intov1.5.0from
04-15-refactor_moved_and_deleted_unused_filter_components
Apr 16, 2026
Merged

refactor: move LogsSidebar to shared LogsFilterSidebar component and add dashboard date picker#2744
akshaydeo merged 1 commit intov1.5.0from
04-15-refactor_moved_and_deleted_unused_filter_components

Conversation

@impoiler
Copy link
Copy Markdown
Contributor

@impoiler impoiler commented Apr 15, 2026

Summary

Refactored the logs filtering system by consolidating the filter sidebar component and adding date range picker functionality to the dashboard page. This change improves code organization and provides consistent filtering capabilities across both logs and dashboard views.

Changes

  • Moved LogsSidebar component to LogsFilterSidebar in the shared components directory for better reusability
  • Added predefined time periods and date range picker functionality to the dashboard page with Unix timestamp handling
  • Removed the FilterPopover component entirely as filtering is now handled through the sidebar
  • Simplified the LogFilters component by removing the hidePopoverFilters prop and related conditional rendering
  • Cleaned up the LogsDataTable component by removing the sidebarFilters prop and associated logic

Type of change

  • Refactor

Affected areas

  • UI (React)

How to test

Verify that filtering functionality works correctly in both logs and dashboard views:

# UI
cd ui
pnpm i || npm i
pnpm test || npm test
pnpm build || npm run build
  1. Navigate to the logs page and verify the filter sidebar appears and functions correctly
  2. Navigate to the dashboard page and confirm the filter sidebar is present with the new date range picker
  3. Test predefined time periods (1h, 6h, 24h, 7d, 30d) on the dashboard
  4. Verify custom date range selection works on both pages
  5. Confirm all existing filter options (status, providers, models, etc.) continue to work

Screenshots/Recordings

N/A - This is primarily a refactoring change with no visual differences expected.

Breaking changes

  • Yes
  • No

Related issues

N/A

Security considerations

No security implications - this is a UI refactoring that maintains existing functionality.

Checklist

  • I read docs/contributing/README.md and followed the guidelines
  • I added/updated tests where appropriate
  • I updated documentation where needed
  • I verified builds succeed (Go and UI)
  • I verified the CI pipeline passes locally if applicable

@coderabbitai
Copy link
Copy Markdown
Contributor

coderabbitai Bot commented Apr 15, 2026

Caution

Review failed

The pull request is closed.

ℹ️ Recent review info
⚙️ Run configuration

Configuration used: Organization UI

Review profile: CHILL

Plan: Pro

Run ID: 97594c98-d939-4adf-9a71-60827f456b37

📥 Commits

Reviewing files that changed from the base of the PR and between 2755ff1 and 49071ff.

📒 Files selected for processing (6)
  • ui/app/workspace/dashboard/page.tsx
  • ui/app/workspace/logs/page.tsx
  • ui/app/workspace/logs/views/filters.tsx
  • ui/app/workspace/logs/views/logsTable.tsx
  • ui/components/filters/filterPopover.tsx
  • ui/components/filters/logsFilterSidebar.tsx

📝 Walkthrough

Summary by CodeRabbit

Release Notes

  • New Features

    • Added date-range picker to dashboard with predefined time period shortcuts
    • Dashboard filters now persist in the URL for sharing and bookmarking
  • Refactor

    • Streamlined filter controls across logs and dashboard
    • Simplified filter UI component architecture

Walkthrough

Replaces FilterPopover with a unified LogsFilterSidebar (renamed), removes sidebar/header branching in logs table, and adds dashboard predefined time periods and URL-backed date-range controls (metadata_filters parsing and synchronization) with a DateTimePickerWithRange.

Changes

Cohort / File(s) Summary
Removed FilterPopover
ui/components/filters/filterPopover.tsx
Deleted entire FilterPopover component and its props/interface, along with all related popover state, selection/resolution logic, and rendering.
Sidebar → LogsFilterSidebar rename
ui/components/filters/logsFilterSidebar.tsx
Renamed exported component from LogsSidebarLogsFilterSidebar; props (filters, onFiltersChange) and internal logic preserved.
Dashboard: period & URL-backed date picker
ui/app/workspace/dashboard/page.tsx
Added TIME_PERIODS and getTimeRangeFromPeriod; parse/serialize metadata_filters in URL state; derive dateRange from URL; added handlePeriodChange and handleDateRangeChange to set start_time/end_time/period in URL; include metadata_filters in API filter payload when present.
Logs page: use LogsFilterSidebar
ui/app/workspace/logs/page.tsx
Switched import/usage from LogsSidebar to LogsFilterSidebar; preserved filters state and setFilters wiring; removed sidebarFilters prop from table usage.
Log filters simplification
ui/app/workspace/logs/views/filters.tsx
Removed FilterPopover integration and hidePopoverFilters prop; always render DateTimePickerWithRange; added local startTime/endTime state synchronized from filters.
Logs table: unified filter rendering
ui/app/workspace/logs/views/logsTable.tsx
Removed sidebarFilters?: boolean from DataTableProps; eliminated branching for sidebar vs header filters and now always renders LogFiltersComponent.

Sequence Diagram(s)

sequenceDiagram
    participant User
    participant DashboardPage
    participant DatePicker as DateTimePickerWithRange
    participant URLState as URL State
    participant API

    User->>DatePicker: select period or pick date range
    DatePicker->>DashboardPage: onPeriodSelect / onRangeChange
    DashboardPage->>URLState: set start_time, end_time, period, metadata_filters
    URLState-->>DashboardPage: updated urlState
    DashboardPage->>API: fetch logs with filters (including metadata_filters, start_time, end_time)
    API-->>DashboardPage: return filtered logs
    DashboardPage->>DatePicker: update visible dateRange (derived from urlState)
Loading

Estimated code review effort

🎯 4 (Complex) | ⏱️ ~45 minutes

Possibly related PRs

Poem

🐰 I hopped through code, a nibble and twirl,
Popovers folded, the sidebar’s a pearl,
Periods tick neatly, URLs hum along,
Filters sing tidy in one steady song,
Logs now march forward — go, little throng!

🚥 Pre-merge checks | ✅ 2 | ❌ 1

❌ Failed checks (1 warning)

Check name Status Explanation Resolution
Docstring Coverage ⚠️ Warning Docstring coverage is 0.00% which is insufficient. The required threshold is 80.00%. Write docstrings for the functions missing them to satisfy the coverage threshold.
✅ Passed checks (2 passed)
Check name Status Explanation
Title check ✅ Passed The title accurately summarizes the main changes: moving LogsSidebar to a shared LogsFilterSidebar component and adding a dashboard date picker.
Description check ✅ Passed The PR description follows the template structure with comprehensive sections covering summary, changes, type, affected areas, testing instructions, and breaking changes status.

✏️ Tip: You can configure your own custom pre-merge checks in the settings.

✨ Finishing Touches
📝 Generate docstrings
  • Create stacked PR
  • Commit on current branch
🧪 Generate unit tests (beta)
  • Create PR with unit tests
  • Commit unit tests in branch 04-15-refactor_moved_and_deleted_unused_filter_components

Comment @coderabbitai help to get the list of available commands and usage tips.

@impoiler impoiler force-pushed the 04-15-refactor_moved_and_deleted_unused_filter_components branch from fab1e61 to d3fa3f7 Compare April 15, 2026 19:10
@impoiler impoiler force-pushed the 04-15-improvement_dashboard_page_filter_ui_revamp branch from 0ffe95e to 3da4913 Compare April 15, 2026 19:10
@impoiler impoiler force-pushed the 04-15-refactor_moved_and_deleted_unused_filter_components branch from d3fa3f7 to 7100207 Compare April 16, 2026 03:13
@impoiler impoiler force-pushed the 04-15-improvement_dashboard_page_filter_ui_revamp branch from 3da4913 to 3c82ce6 Compare April 16, 2026 03:14
@impoiler impoiler self-assigned this Apr 16, 2026
@impoiler impoiler force-pushed the 04-15-refactor_moved_and_deleted_unused_filter_components branch from 7100207 to 8e91edd Compare April 16, 2026 05:49
@impoiler impoiler force-pushed the 04-15-improvement_dashboard_page_filter_ui_revamp branch from 3c82ce6 to dfb598c Compare April 16, 2026 05:49
@impoiler impoiler changed the title refactor: moved and deleted unused filter components refactor: move LogsSidebar to shared LogsFilterSidebar component and add dashboard date picker Apr 16, 2026
@impoiler impoiler force-pushed the 04-15-refactor_moved_and_deleted_unused_filter_components branch from 8e91edd to df190ec Compare April 16, 2026 08:16
@impoiler impoiler marked this pull request as ready for review April 16, 2026 10:07
Copy link
Copy Markdown
Contributor

@coderabbitai coderabbitai Bot left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

🧹 Nitpick comments (3)
ui/components/filters/logsFilterSidebar.tsx (1)

18-23: Consider renaming the interface to match the component name.

The interface is still named LogsSidebarProps while the component was renamed to LogsFilterSidebar. For consistency, consider renaming to LogsFilterSidebarProps.

♻️ Suggested rename
-interface LogsSidebarProps {
+interface LogsFilterSidebarProps {
 	filters: LogFilters;
 	onFiltersChange: (filters: LogFilters) => void;
 }

-export function LogsFilterSidebar({ filters, onFiltersChange }: LogsSidebarProps) {
+export function LogsFilterSidebar({ filters, onFiltersChange }: LogsFilterSidebarProps) {
🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed.

In `@ui/components/filters/logsFilterSidebar.tsx` around lines 18 - 23, Rename the
props interface to match the component name for consistency: change the
interface named LogsSidebarProps to LogsFilterSidebarProps and update the
component signature/usage where LogsFilterSidebar accepts its props (the
LogsFilterSidebar function parameter and any references to LogsSidebarProps) so
all types and imports refer to LogsFilterSidebarProps.
ui/app/workspace/logs/views/filters.tsx (1)

63-69: Minor observation: local state is set twice on picker interaction.

When the user selects a date, both the inline handler (lines 152-153) and the useEffect (lines 66-69) update startTime/endTime. The useEffect sync from filters is necessary for external updates (e.g., URL restore), but it also runs after the handler's direct state update. This doesn't cause bugs since values are identical, but you could optimize by checking if values differ before updating in the useEffect.

This is a minor optimization and the current implementation works correctly.

🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed.

In `@ui/app/workspace/logs/views/filters.tsx` around lines 63 - 69, The useEffect
that syncs filters.start_time and filters.end_time always calls
setStartTime/setEndTime even when the local startTime/endTime already match,
causing redundant state updates after the picker's inline handlers; modify the
effect (useEffect) to first compare the current local values (startTime and
endTime) with the parsed filters (new Date(filters.start_time) / new
Date(filters.end_time) or undefined) and only call setStartTime/setEndTime when
they differ, so external updates still propagate but duplicate updates from the
picker are avoided.
ui/app/workspace/dashboard/page.tsx (1)

51-76: Consider extracting shared time period utilities.

TIME_PERIODS and getTimeRangeFromPeriod duplicate similar logic found in ui/app/workspace/logs/views/filters.tsx (LOG_TIME_PERIODS and getRangeForPeriod). Consider extracting these to a shared utility file to reduce duplication.

The current implementation is correct and works well; this is a nice-to-have for maintainability.

🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed.

In `@ui/app/workspace/dashboard/page.tsx` around lines 51 - 76, TIME_PERIODS and
getTimeRangeFromPeriod duplicate LOG_TIME_PERIODS and getRangeForPeriod from
ui/app/workspace/logs/views/filters.tsx; extract a shared utility module (e.g.,
timePeriodUtils) that exports the canonical constants and function, move the
logic from TIME_PERIODS and getTimeRangeFromPeriod into that module, update both
dashboard.page.tsx (replace TIME_PERIODS/getTimeRangeFromPeriod imports) and
filters.tsx (replace LOG_TIME_PERIODS/getRangeForPeriod imports) to consume the
shared exports, and ensure type signatures and exported names match existing
usages.
🤖 Prompt for all review comments with AI agents
Verify each finding against the current code and only fix it if needed.

Nitpick comments:
In `@ui/app/workspace/dashboard/page.tsx`:
- Around line 51-76: TIME_PERIODS and getTimeRangeFromPeriod duplicate
LOG_TIME_PERIODS and getRangeForPeriod from
ui/app/workspace/logs/views/filters.tsx; extract a shared utility module (e.g.,
timePeriodUtils) that exports the canonical constants and function, move the
logic from TIME_PERIODS and getTimeRangeFromPeriod into that module, update both
dashboard.page.tsx (replace TIME_PERIODS/getTimeRangeFromPeriod imports) and
filters.tsx (replace LOG_TIME_PERIODS/getRangeForPeriod imports) to consume the
shared exports, and ensure type signatures and exported names match existing
usages.

In `@ui/app/workspace/logs/views/filters.tsx`:
- Around line 63-69: The useEffect that syncs filters.start_time and
filters.end_time always calls setStartTime/setEndTime even when the local
startTime/endTime already match, causing redundant state updates after the
picker's inline handlers; modify the effect (useEffect) to first compare the
current local values (startTime and endTime) with the parsed filters (new
Date(filters.start_time) / new Date(filters.end_time) or undefined) and only
call setStartTime/setEndTime when they differ, so external updates still
propagate but duplicate updates from the picker are avoided.

In `@ui/components/filters/logsFilterSidebar.tsx`:
- Around line 18-23: Rename the props interface to match the component name for
consistency: change the interface named LogsSidebarProps to
LogsFilterSidebarProps and update the component signature/usage where
LogsFilterSidebar accepts its props (the LogsFilterSidebar function parameter
and any references to LogsSidebarProps) so all types and imports refer to
LogsFilterSidebarProps.

ℹ️ Review info
⚙️ Run configuration

Configuration used: Organization UI

Review profile: CHILL

Plan: Pro

Run ID: 9a934eaf-a3f5-4f33-9824-ce3881038414

📥 Commits

Reviewing files that changed from the base of the PR and between 0ef6c20 and df190ec.

📒 Files selected for processing (6)
  • ui/app/workspace/dashboard/page.tsx
  • ui/app/workspace/logs/page.tsx
  • ui/app/workspace/logs/views/filters.tsx
  • ui/app/workspace/logs/views/logsTable.tsx
  • ui/components/filters/filterPopover.tsx
  • ui/components/filters/logsFilterSidebar.tsx
💤 Files with no reviewable changes (1)
  • ui/components/filters/filterPopover.tsx

@greptile-apps
Copy link
Copy Markdown
Contributor

greptile-apps Bot commented Apr 16, 2026

Confidence Score: 4/5

Safe to merge with one minor UX fix needed in the dashboard's setFilters adapter.

All remaining findings are P2 — a UX inconsistency where the period button deselects on non-date filter changes, but data correctness is unaffected. The logs page refactoring is clean and correct.

ui/app/workspace/dashboard/page.tsx — setFilters period-clearing logic

Important Files Changed

Filename Overview
ui/app/workspace/dashboard/page.tsx Adds LogsFilterSidebar and date range picker to dashboard; the setFilters adapter unconditionally clears the period selection on every non-date filter change (P2), and the sidebar's SessionFilter/AliasesFilter sections remain non-functional on this page (previously flagged).
ui/components/filters/logsFilterSidebar.tsx New shared component consolidating the LogsSidebar filter functionality; well-structured with collapsible sections, search, and lazy data fetching.
ui/app/workspace/logs/page.tsx Adopts LogsFilterSidebar cleanly; all filter fields (including parent_request_id and aliases) are correctly wired in both the filters object and setFilters.
ui/app/workspace/logs/views/filters.tsx Simplified correctly — removed hidePopoverFilters prop and FilterPopover integration; date picker and search remain functional.
ui/app/workspace/logs/views/logsTable.tsx Removed sidebarFilters prop cleanly; no regressions introduced.

Reviews (7): Last reviewed commit: "refactor: moved and deleted unused filte..." | Re-trigger Greptile

@impoiler impoiler force-pushed the 04-15-improvement_dashboard_page_filter_ui_revamp branch from 0ef6c20 to c6f1f66 Compare April 16, 2026 10:19
@impoiler impoiler force-pushed the 04-15-refactor_moved_and_deleted_unused_filter_components branch from df190ec to 2755ff1 Compare April 16, 2026 10:19
Copy link
Copy Markdown
Contributor

@coderabbitai coderabbitai Bot left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Actionable comments posted: 2

🤖 Prompt for all review comments with AI agents
Verify each finding against the current code and only fix it if needed.

Inline comments:
In `@ui/app/workspace/logs/views/filters.tsx`:
- Around line 148-172: The predefined-period buttons inside the
DateTimePickerWithRange component are missing data-testid attributes, which
prevents E2E tests from selecting them; update the DateTimePickerWithRange
component (the button rendering loop around the predefined periods) to add a
data-testid following the pattern data-testid="filter-date-range-period-<value>"
(use the period value or a sanitized key) for each button so tests can reliably
query them; ensure the attribute is present wherever the component maps
LOG_TIME_PERIODS (or similar prop) to buttons and maintain existing
onClick/onChange handlers.
- Around line 161-170: The handler onPredefinedPeriodChange currently converts
relative presets into fixed ISO timestamps via getRangeForPeriod and
onFiltersChange, which freezes the window; instead, preserve the chosen preset
in the filters (e.g. add a period/preset field) and avoid writing concrete
start_time/end_time there so the UI can recompute from getRangeForPeriod on each
refresh or live tick; update setStartTime/setEndTime only for the immediate view
state (not persisted filters) or alternatively disable live mode when concrete
start_time/end_time are saved—make the change in the onPredefinedPeriodChange
implementation and adjust any code that reads filters to compute ranges from the
persisted preset rather than relying on stored timestamps.
🪄 Autofix (Beta)

Fix all unresolved CodeRabbit comments on this PR:

  • Push a commit to this branch (recommended)
  • Create a new PR with the fixes

ℹ️ Review info
⚙️ Run configuration

Configuration used: Organization UI

Review profile: CHILL

Plan: Pro

Run ID: d8dfcfc6-788a-4a3b-9498-abd887f6d390

📥 Commits

Reviewing files that changed from the base of the PR and between df190ec and 2755ff1.

📒 Files selected for processing (6)
  • ui/app/workspace/dashboard/page.tsx
  • ui/app/workspace/logs/page.tsx
  • ui/app/workspace/logs/views/filters.tsx
  • ui/app/workspace/logs/views/logsTable.tsx
  • ui/components/filters/filterPopover.tsx
  • ui/components/filters/logsFilterSidebar.tsx
💤 Files with no reviewable changes (1)
  • ui/components/filters/filterPopover.tsx
🚧 Files skipped from review as they are similar to previous changes (4)
  • ui/components/filters/logsFilterSidebar.tsx
  • ui/app/workspace/logs/views/logsTable.tsx
  • ui/app/workspace/logs/page.tsx
  • ui/app/workspace/dashboard/page.tsx

Comment thread ui/app/workspace/logs/views/filters.tsx
Comment thread ui/app/workspace/logs/views/filters.tsx
Comment thread ui/app/workspace/dashboard/page.tsx
@impoiler impoiler force-pushed the 04-15-refactor_moved_and_deleted_unused_filter_components branch from 2755ff1 to bd7d209 Compare April 16, 2026 13:38
@impoiler impoiler force-pushed the 04-15-improvement_dashboard_page_filter_ui_revamp branch from c6f1f66 to 46a2604 Compare April 16, 2026 13:38
coderabbitai[bot]
coderabbitai Bot previously approved these changes Apr 16, 2026
@impoiler impoiler force-pushed the 04-15-improvement_dashboard_page_filter_ui_revamp branch from 46a2604 to 4dd16ae Compare April 16, 2026 13:58
@impoiler impoiler force-pushed the 04-15-refactor_moved_and_deleted_unused_filter_components branch from bd7d209 to 07f582c Compare April 16, 2026 13:58
@impoiler impoiler force-pushed the 04-15-improvement_dashboard_page_filter_ui_revamp branch from 4dd16ae to 72bcca9 Compare April 16, 2026 13:59
@impoiler impoiler force-pushed the 04-15-refactor_moved_and_deleted_unused_filter_components branch from 07f582c to 06b4f24 Compare April 16, 2026 13:59
Copy link
Copy Markdown
Contributor

akshaydeo commented Apr 16, 2026

Merge activity

  • Apr 16, 2:34 PM UTC: A user started a stack merge that includes this pull request via Graphite.
  • Apr 16, 2:35 PM UTC: Graphite couldn't merge this pull request because a downstack PR feat: add sidebar filters to logs page #2731 failed to merge.
  • Apr 16, 3:16 PM UTC: A user started a stack merge that includes this pull request via Graphite.
  • Apr 16, 3:19 PM UTC: Graphite rebased this pull request as part of a merge.
  • Apr 16, 3:20 PM UTC: @akshaydeo merged this pull request with Graphite.

@impoiler impoiler force-pushed the 04-15-improvement_dashboard_page_filter_ui_revamp branch from 72bcca9 to c2d0d48 Compare April 16, 2026 14:59
@impoiler impoiler force-pushed the 04-15-refactor_moved_and_deleted_unused_filter_components branch 2 times, most recently from 08f1341 to ed795ad Compare April 16, 2026 15:13
@impoiler impoiler force-pushed the 04-15-improvement_dashboard_page_filter_ui_revamp branch from c2d0d48 to cb5e7a2 Compare April 16, 2026 15:13
@akshaydeo akshaydeo changed the base branch from 04-15-improvement_dashboard_page_filter_ui_revamp to graphite-base/2744 April 16, 2026 15:17
@akshaydeo akshaydeo changed the base branch from graphite-base/2744 to v1.5.0 April 16, 2026 15:18
@akshaydeo akshaydeo dismissed coderabbitai[bot]’s stale review April 16, 2026 15:18

The base branch was changed.

@akshaydeo akshaydeo force-pushed the 04-15-refactor_moved_and_deleted_unused_filter_components branch from ed795ad to 49071ff Compare April 16, 2026 15:18
@akshaydeo akshaydeo merged commit a54826f into v1.5.0 Apr 16, 2026
10 of 16 checks passed
@akshaydeo akshaydeo deleted the 04-15-refactor_moved_and_deleted_unused_filter_components branch April 16, 2026 15:20
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants